<script setup>
import { ref } from 'vue';
import clickFn from '@/utils/heartclick/animate.js';
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
// import HelloWorld from './components/HelloWorld.vue';
// import Tree from './unit/tree/tree.vue';
// import Input from './unit/input/index.vue';
// import Card from './unit/card/index.vue';
// import Button from './unit/button/index.vue';
// import Switch from './unit/switch/index.vue';
// import Check from './unit/check/index.vue';
// import Radio from './unit/radio/index.vue';
// import Tabs from './unit/tags/index.vue';
clickFn();
let timer = null;
let show = ref(true);
let scale = ref(1);
scale.value = Math.min(window.innerHeight / 900, window.innerWidth / 1660);
console.log(scale.value);
window.addEventListener('resize', () => {
    if (timer) clearTimeout(timer);
    show.value = false;
    timer = setTimeout(() => {
        scale.value = Math.min(window.innerHeight / 900, window.innerWidth / 1660);
        show.value = true;
        // console.log(, window.innerWidth / 1920);
    }, 80);
    console.log(window.innerWidth, window.innerHeight);
});
import Fish from './components/Fish.vue';
import Background from './components/Background.vue';
</script>
<template>
    <Background v-if="show"></Background>
    <div
        style="width: 1660px; height: 900px"
        :style="`position: absolute; left: 50%; transform-origin:center top;transform:translateX(-50%) scale(${scale})`"
    >
        <div class="gy-container">
            <div class="gy-container-box common-box">
                <router-view />
                <!-- <Fish></Fish> -->
            </div>
        </div>
    </div>

    <!-- <Tree></Tree> -->
    <!-- <Input v-model:value="value" style="margin: 10px auto"></Input>
    <div class="box common-box" style="margin: 10px auto"></div>
    <div style="width: 500px; height: 300px; margin: 16px auto">
        <Card></Card>
    </div>
    <Button type="default" style="margin: 10px auto"></Button>
    <Button type="primary" style="margin: 10px auto"></Button>
    <Button type="circle" style="margin: 10px auto"></Button>
    <Switch style="margin: 10px auto"></Switch>
    <Check id="001" label="001" checkName="checkName"></Check>
    <Check id="002" label="002" checkName="checkName"></Check>
    <Check id="003" label="003" checkName="checkName"></Check>
    <Check id="004" label="004" checkName="checkName"></Check>
    <div></div>
    <hr />
    <hr />
    <Radio id="radio001" radioName="radioName"></Radio>
    <Radio id="radio002" radioName="radioName"></Radio>
    <Radio id="radio003" radioName="radioName"></Radio>
    <Radio id="radio004" radioName="radioName"></Radio>
    <Tabs style="margin: 10px auto"></Tabs> -->
</template>
<script>
export default {
    data() {
        return {
            value: 'init Value',
        };
    },
    watch: {
        value(v) {
            // console.log(v);
        },
    },
};
</script>

<style lang="less" scoped>
.gy-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 16px;
    position: relative;
    .gy-container-box {
        width: calc(100% - 32px);
        height: calc(100% - 32px);
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin: 0 auto;
        z-index: 1;
        overflow: hidden;
    }
}
</style>
